<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入框控件type类型</title>
</head>
<body>
    <!-- 
        1、基本语法 <input type="">
        2、控件类型type属性决定：type属性用于设置输入框控件的类型，指定插入哪种表单元素（单选、多选、颜色、日期）
        3、控件类型type取值：
            text普通文本--正常显示输入文本
            password密码--不会明文显示，而是显示成实心小圆点或者*号（作用：提高安全性）
            number纯数字
            file文件
            radio单选--单选互斥需要结合name属性来实现，保证input单选框的name属性值一致即可
            checkbox多选--多选框属于一组则将其name属性值保证一致即可
            button按钮---按钮显示值使用value属性设置
            image图片按钮---src图片路径、alt预文本（图片加载失败时提示文本）、width宽、height高
            hidden隐藏域--用于隐藏关键信息，不让用户看到
            reset重置--用于重置表单内容
            submit提交--用于提交表单信息
        4、注意：
            【1】按钮控件类型reset、submit、button，按钮显示值都取决于value属性
                <input type="button" value="注册">
                <input type="reset" value="重置">
                <input type="submit" value="提交">
            【2】单选框、多选框默认选中项
                属性checked
    -->
    <form>
        用户名：<input type="text"><br>
        密码：<input type="password"><br>
        年龄：<input type="number"><br>
        头像：<input type="file"><br>
        性别：
            <!-- name属性用于标识一组单选\多选 -->
            男<input type="radio" name="sex" checked>
            女<input type="radio" name="sex">
            保密<input type="radio" name="sex">
        <br>
        爱好：
            游泳<input type="checkbox" name="like" checked>
            唱歌<input type="checkbox" name="like" checked>
            爬山<input type="checkbox" name="like">
        <br>
        <!-- value用于设置按钮文本，在其他input元素中用于标识控件值 -->
        <input type="button" value="注册">
        <br>
        <!-- 图片按钮 -->
        <input 
            type="image" 
            src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2241796547,1533443243&fm=26&gp=0.jpg" 
            alt="预文本-图片加载失败时显示，用于提示用户"
            width="50"
            height="50"
        >
        <!-- 隐藏域 -->
        <input type="hidden">
        <!-- 重置按钮 -->
        <input type="reset" value="重置">
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>